<template>

    <div class="addMerchantBox" v-loading="loading">
        <el-button
                size="mini"
                @click="handleBackClass"
                icon="el-icon-arrow-left"
                type="primary"
                round>返回</el-button>
        <el-form ref="form" :model="classForm" :rules="rules" style="margin-top: 24px;">

            <el-form-item label="分类名称" prop="name">
                <el-input v-model="classForm.name" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="上级分类" prop="parent_id" >
                <el-select v-model="classForm.parent_id" style="width: 300px" placeholder="请选择">
                    <el-option
                            v-for="item in classData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="排序" prop="sort">
                <el-input v-model="classForm.sort" style="width:300px"></el-input>
            </el-form-item>



            <el-form-item label="分类图标" prop="icon">
                <div class="picUpload" style="display:flex;flex-direction:row">
                    <el-upload
                            :http-request="handlePictureCardPreview"
                            :multiple="false"
                            action
                            list-type="picture-card"
                            name="icon_img"
                            ref="businessLicenseUpload"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog
                            :modal="false"
                            :center="true"
                            :show-close="false"
                            class="commonVisible"
                            :visible.sync="iconVisible"
                            :fullscreen="true"
                    >
                        <el-image
                                style="margin: auto;"
                                alt
                                class
                                fit="scale-down"
                                :src="classForm.icon"
                                v-show="iconVisible">

                        </el-image>
                        <!--<img >-->
                        <span class="hoverBox" @click="iconVisible=false" v-show="iconVisible">
                        <span class="deleteIcon">
                            <i class="el-icon-delete"></i>
                        </span>
                    </span>
                    </el-dialog>
                </div>
            </el-form-item>

        </el-form>


        <div class="submitBtnBox">
            <el-button class="submitBtn" @click="submitFn"  type="primary">保存</el-button>
        </div>
        <div style="height: 80px"></div>
    </div>
</template>

<script>
    import {truncate} from 'fs';

    export default {
        name: 'certification',
        data() {
            return {
                classForm: {
                    name: '',
                    parent_id: '',
                    sort: '',
                    icon: '',
                },
                rules: {
                    name: [
                        { required: true, message: '请输入分类名称', trigger: 'blur' }
                    ],
                    parent_id: [
                        { required: true, message: '请选择上级分类', trigger: 'blur' }
                    ],
                    sort: [
                        { required: true, message: '请输入排序', trigger: 'blur' }
                    ],
                    icon: [
                        { required: true, message: '请上传图标图片', trigger: 'blur' }
                    ]
                },
                loading: false,
                iconVisible: true,
                classData: [],

            }
        },
        methods: {

            defaultData(){
                this.loading = true;
                this.$http.get('/web/good/class/read', {
                    params: {
                        token: localStorage.getItem('user_token'),
                        id: this.$route.query.id
                    }
                }).then(response => {
                    if (response.data.status === 'success'){
                        this.classForm = response.data.data;
                        this.classForm.token = localStorage.getItem('user_token');
                    }
                    this.loading = false;
                }).catch(()=> {
                    this.loading = false;
                })
            },

            getClassData(){
                this.loading = true;
                this.$http.post('/web/good/classify', {
                    token: localStorage.getItem('user_token'),
                    p_id: 0
                }).then(response => {
                    if (response.data.status === 'success'){
                        this.classData = response.data.data;
                        this.classData.unshift({id: 0, name: '无上级'})
                    }
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                })
            },

            //上传图片
            handlePictureCardPreview(file) {
                this.loading = true;
                console.log("file-file:", file.filename);
                let imageFile = file.file;
                let formData = new FormData();
                formData.append("image", imageFile);
                formData.append("action", file.filename);
                this.$http.post("/api/tool/ali/upload/image", formData).then(response => {
                    if (response.data.status === 'success') {
                        this.classForm.icon = response.data.data;
                    }
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                });
            },

            //提交信息
            submitFn() {
                this.$refs.form.validate(valid => {
                    if (!valid) {
                        return false;
                    } else {
                        this.loading = true;
                        this.$http.post('/web/good/class/update', this.classForm).then(
                            response => {
                                if (response.data.status === 'success'){
                                    this.$message.success('修改成功');
                                    this.handleBackClass()
                                }
                                this.loading = false;
                            }
                        ).catch(() => {
                            this.loading = false;
                        })
                    }
                })
            },

            handleBackClass(){
                this.$router.push({name: 'goodsMerchant'})
            }
        },
        mounted() {
            this.defaultData();
            this.getClassData();
            this.$refs.businessLicenseUpload.submit();
        }

    }

</script>

<style scoped lang="scss">
    @import "./class.scss";
</style>